<template>
  <section class="border-t border-transparent">
    <swiper-container
        :slides-per-view="1"
        :loop="true"
        :autoplay="{
          delay: 5000,
        }"
    >
      <swiper-slide v-for="(image, index) in imagePaths" :key="index">
        <img :src="image.path" :alt="image.name" />
      </swiper-slide>
    </swiper-container>
  </section>
</template>

<script setup>

const images = import.meta.glob('/src/images/home/banner-*.webp', { eager: true });

const imagePaths = Object.entries(images).map(([key, value]) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop(),  // 提取文件名
}));

</script>

<style>
.swiper-slide {
  height: 42rem;
}

.swiper-slide-bg {
  min-height: 100%;
  min-width: 100%;
  background-size: cover;
}
</style>
